<script setup>
import LayoutFixed from '../Layout/components/LayoutFixed.vue';
import LayoutNav from '../Layout/components/LayoutNav.vue';

</script>


<template >
    <div class="page">
        <div class="left">
            <div class="nav">
            <LayoutNav />
            </div>
        </div>
        <div class="right">
            <div class="fixed">
            <LayoutFixed />
            </div>
            <div class="container">
                <router-view></router-view>
            </div>
            </div>
    </div>
    
</template>

<style>
.page  {
    width: 1440px;
    height: 1024px;
    display: flex;
    flex-direction:row; /* 水平排列子元素 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}
.left {
    width: 122px;
    height: 100%;
    background-color: rgb(190,190,190);
}
.right {
    width: 1318px;
    height: 100%;
    display:flex;
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}
.fixed {
    width: 100%;
    height: 102px;
    background-color: white;
    border-top: 2px solid rgb(190,190,190); /* 上边框 */
    border-bottom: 2px solid rgb(190,190,190); /* 下边框 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}
.container {
    width: 100%;
    height: 922px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    /* overflow: hidden; */
}

</style>
